<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="Crush it Able The most popular Admin Dashboard template and ui kit">
<meta name="author" content="PuffinTheme the theme designer">
<meta http-equiv="Content-Language" content="en">
<link rel="icon" href="~/Crushit/light/favicon.ico" type="image/x-icon"/>

<title>:: Crush it :: Documentation</title>

<!-- Bootstrap Core and Font Icon -->
<link rel="stylesheet" href="../../assets/plugins/bootstrap/css/bootstrap.min.css" />

<!-- Core css -->
<link rel="stylesheet" href="../../assets/css/main.css"/>
<link rel="stylesheet" href="../../assets/css/theme1.css"/>
</head>

<body class="font-opensans">

<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
    </div>
</div>

<!-- Start main html -->
<div id="main_content">

    <!-- Small icon top menu -->
    <div id="header_top" class="header_top">
        <div class="container">
            <div class="hleft">
                <div class="dropdown">
                    <a href="javascript:void(0)" class="nav-link user_btn"><img class="avatar" src="../../assets/images/user.png" alt=""/></a>
                    <a href="../page-search.html" class="nav-link icon"><i class="fa fa-search"></i></a>
                    <a href="../index.html" class="nav-link icon"><i class="fa fa-home"></i></a>
                    <a href="../app-email.html"  class="nav-link icon app_inbox"><i class="fa fa-envelope"></i></a>
                    <a href="../app-chat.html"  class="nav-link icon xs-hide"><i class="fa fa-comments"></i></a>
                    <a href="../app-filemanager.html"  class="nav-link icon app_file xs-hide"><i class="fa fa-folder"></i></a>
                </div>
            </div>
            <div class="hright">
                <div class="dropdown">
                    <a href="javascript:void(0)" class="nav-link icon settingbar"><i class="fa fa-bell"></i></a>
                    <a href="javascript:void(0)" class="nav-link icon menu_toggle"><i class="fa fa-navicon"></i></a>
                </div>            
            </div>
        </div>
    </div>

    <!-- Notification and  Activity-->
    <div id="rightsidebar" class="right_sidebar">
        <a href="javascript:void(0)" class="p-3 settingbar float-right"><i class="fa fa-close"></i></a>
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#notification" aria-expanded="true">Notification</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#activity" aria-expanded="false">Activity</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane   active" id="notification" aria-expanded="true">
                <ul class="list-unstyled feeds_widget">
                    <li>
                        <div class="feeds-left"><i class="fa fa-check"></i></div>
                        <div class="feeds-body">
                            <h4 class="title text-danger">Issue Fixed</h4>
                            <small>WE have fix all Design bug with Responsive</small>
                            <small class="text-muted">11:05</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-user"></i></div>
                        <div class="feeds-body">
                            <h4 class="title">New User</h4>
                            <small>I feel great! Thanks team</small>
                            <small class="text-muted">10:45</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-thumbs-o-up"></i></div>
                        <div class="feeds-body">
                            <h4 class="title">7 New Feedback</h4>
                            <small>It will give a smart finishing to your site</small>
                            <small class="text-muted">Today</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-question-circle"></i></div>
                        <div class="feeds-body">
                            <h4 class="title text-warning">Server Warning</h4>
                            <small>Your connection is not private</small>
                            <small class="text-muted">10:50</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-shopping-cart"></i></div>
                        <div class="feeds-body">
                            <h4 class="title">7 New Orders</h4>
                            <small>You received a new oder from Tina.</small>
                            <small class="text-muted">11:35</small>
                        </div>
                    </li>                                   
                </ul>
            </div>
            <div role="tabpanel" class="tab-pane  " id="activity" aria-expanded="false">
                <ul class="new_timeline mt-3">
                    <li>
                        <div class="bullet pink"></div>
                        <div class="time">11:00am</div>
                        <div class="desc">
                            <h3>Attendance</h3>
                            <h4>Computer Class</h4>
                        </div>
                    </li>
                    <li>
                        <div class="bullet pink"></div>
                        <div class="time">11:30am</div>
                        <div class="desc">
                            <h3>Added an interest</h3>
                            <h4>“Volunteer Activities”</h4>
                        </div>
                    </li>
                    <li>
                        <div class="bullet green"></div>
                        <div class="time">12:00pm</div>
                        <div class="desc">
                            <h3>Developer Team</h3>
                            <h4>Hangouts</h4>
                            <ul class="list-unstyled team-info margin-0 p-t-5">                                            
                                <li><img src="../../assets/images/xs/avatar1.jpg" alt="Avatar"></li>
                                <li><img src="../../assets/images/xs/avatar2.jpg" alt="Avatar"></li>
                                <li><img src="../../assets/images/xs/avatar3.jpg" alt="Avatar"></li>
                                <li><img src="../../assets/images/xs/avatar4.jpg" alt="Avatar"></li>                                            
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="bullet green"></div>
                        <div class="time">2:00pm</div>
                        <div class="desc">
                            <h3>Responded to need</h3>
                            <a href="javascript:void(0)">“In-Kind Opportunity”</a>
                        </div>
                    </li>
                    <li>
                        <div class="bullet orange"></div>
                        <div class="time">1:30pm</div>
                        <div class="desc">
                            <h3>Lunch Break</h3>
                        </div>
                    </li>
                    <li>
                        <div class="bullet green"></div>
                        <div class="time">2:38pm</div>
                        <div class="desc">
                            <h3>Finish</h3>
                            <h4>Go to Home</h4>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- start User detail -->
    <div class="user_div">
        <h5 class="brand-name mb-4">User Crush<a href="javascript:void(0)" class="user_btn"><i class="icon-close"></i></a></h5>
        <div class="card">
            <img class="card-img-top" src="../../assets/images/gallery/6.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Daniel Kristeen</h5>
                <p class="card-text">795 Folsom Ave, Suite 600 San Francisco, 94107</p>
                <div class="row">
                    <div class="col-4">
                        <h6><strong>3265</strong></h6>
                        <small>Post</small>
                    </div>
                    <div class="col-4">
                        <h6><strong>1358</strong></h6>
                        <small>Followers</small>
                    </div>
                    <div class="col-4">
                        <h6><strong>10K</strong></h6>
                        <small>Likes</small>
                    </div>
                </div>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">michael@example.com</li>
                <li class="list-group-item">+ 202-555-2828</li>
                <li class="list-group-item">October 22th, 1990</li>
            </ul>
            <div class="card-body">
                <a href="javascript:void(0);" class="card-link">View More</a>
                <a href="javascript:void(0);" class="card-link">Another link</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <label class="d-block">Total Income<span class="float-right">77%</span></label>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-blue" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="d-block">Total Expenses <span class="float-right">50%</span></label>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                    </div>
                </div>
                <div class="form-group mb-0">
                    <label class="d-block">Gross Profit <span class="float-right">23%</span></label>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-green" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width: 23%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="d-block">Storage <span class="float-right">77%</span></label>
            <div class="progress progress-sm">
                <div class="progress-bar" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;"></div>
            </div>
            <button type="button" class="btn btn-primary btn-block mt-3">Upgrade Storage</button>
        </div>
    </div>

    <!-- start Main menu -->
    <div id="left-sidebar" class="sidebar">
        <div class="d-flex justify-content-between brand_name">
            <h5 class="brand-name">Crush it</h5>
            <div class="theme_btn">
                <a class="theme1" data-toggle="tooltip" title="Theme Radical" href="#" onclick="setStyleSheet('../assets/css/theme1.css', 0);"></a>
                <a class="theme2" data-toggle="tooltip" title="Theme Turmeric" href="#" onclick="setStyleSheet('../assets/css/theme2.css', 0);"></a>
                <a class="theme3" data-toggle="tooltip" title="Theme Caribbean" href="#" onclick="setStyleSheet('../assets/css/theme3.css', 0);"></a>
                <a class="theme4" data-toggle="tooltip" title="Theme Cascade" href="#" onclick="setStyleSheet('../assets/css/theme4.css', 0);"></a>
            </div>
        </div>
        <div class="input-icon">
            <span class="input-icon-addon">
                <i class="fe fe-search"></i>
            </span>
            <input type="text" class="form-control" placeholder="Search...">
        </div>
        <ul class="nav nav-tabs b-none">
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#all-tab"><i class="fa fa-list-ul"></i> All</a></li>
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#app-tab">Elements</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#setting-tab">Settings</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade" id="all-tab">
                <nav class="sidebar-nav">
                    <ul class="metismenu ci-effect-1">
                        <li class="g_heading">Directories</li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-home"></i><span data-hover="Dashboard">Dashboard</span></a>
                            <ul>
                                <li><a href="../index.html"><span data-hover="Web Analytics">Web Analytics</span></a></li>
                                <li><a href="../index2.html"><span data-hover="Cryptocurrency">Cryptocurrency</span></a></li>
                                <li><a href="../index3.html"><span data-hover="Sales Monitoring">Sales Monitoring</span></a></li>
                                <li><a href="../index4.html"><span data-hover="eCommerce Analytics">eCommerce Analytics</span></a></li>
                                <li><a href="../app-social.html"><span data-hover="Campaigns">Campaigns</span></a></li>
                            </ul>
                        </li>
                        <li><a href="../app-calendar.html"><i class="icon-calendar"></i><span data-hover="Calendar">Calendar</span></a></li>
                        <li><a href="../app-chat.html"><i class="icon-speech"></i><span data-hover="Chat">Chat</span></a></li>
                        <li><a href="../app-contact.html"><i class="icon-notebook"></i><span data-hover="Contact">Contact</span></a></li>
                        <li><a href="../app-blog.html"><i class="icon-globe"></i><span data-hover="Blog">Blog</span></a></li>
                        <li><a href="../app-filemanager.html"><i class="icon-folder-alt"></i><span data-hover="FileManager">File Manager</span></a></li>
                        <li><a href="../page-gallery.html"><i class="icon-picture"></i><span data-hover="Gallery">Gallery</span></a></li>
                        <li class="g_heading">Utilities</li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-tag"></i><span data-hover="Icons">Icons</span></a>
                            <ul>
                                <li><a href="../icons-feather.html"><span data-hover="Feather">Feather Icons</span></a></li>
                                <li><a href="../icons-line.html"><span data-hover="Line">Line Icons</span></a></li>
                                <li><a href="../icons-fontawesome.html"><span data-hover="FontAwesome">FontAwesome</span></a></li>
                                <li><a href="../icons-flags.html"><span data-hover="Flags">Flags Icons</span></a></li>
                                <li><a href="../icons-payments.html"><span data-hover="Payments">Payments Icons</span></a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-bar-chart"></i><span data-hover="Charts">Charts</span></a>
                            <ul>
                                <li><a href="../charts-apex.html"><span data-hover="ChartsApex">Charts Apex</span></a></li>
                                <li><a href="../charts-e.html"><span data-hover="EChart">EChart</span></a></li>
                                <li><a href="../charts-c3.html"><span data-hover="C3Chart">C3 Chart</span></a></li>
                                <li><a href="../charts-knob.html"><span data-hover="JQueryKnob">JQuery Knob</span></a></li>
                                <li><a href="../charts-sparkline.html"><span data-hover="SparklineChart">Sparkline Chart</span></a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-layers"></i><span data-hover="Forms">Forms</span></a>
                            <ul>
                                <li><a href="../form-elements.html"><span data-hover="BasicElements">Basic Elements</span></a></li>
                                <li><a href="../form-advanced.html"><span data-hover="AdvancedElements">Advanced Elements</span></a></li>
                                <li><a href="../form-validation.html"><span data-hover="FormValidation">Form Validation</span></a></li>
                                <li><a href="../form-wizard.html"><span data-hover="FormWizard">Form Wizard</span></a></li>
                                <li><a href="../form-summernote.html"><span data-hover="Summernote">Summernote</span></a></li>
                                
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-tag"></i><span data-hover="Tables">Tables</span></a>
                            <ul>
                                <li><a href="../table-normal.html"><span data-hover="Bootstrap">Bootstrap Table</span></a></li>
                                <li><a href="../table-datatable.html"><span data-hover="Datatable">Jquery Datatable</span></a></li>
                            </ul>
                        </li>                
                        <li><a href="../widgets.html"><i class="icon-puzzle"></i><span data-hover="Widgets">Widgets</span></a></li>
                        <li class="g_heading">Extra Pages</li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-lock"></i><span data-hover="Authentication">Authentication</span></a>
                            <ul>
                                <li><a href="../login.html"><span data-hover="Login">Login</span></a></li>
                                <li><a href="../register.html"><span data-hover="Register">Register</span></a></li>
                                <li><a href="../forgot-password.html"><span data-hover="Forgot">Forgot password</span></a></li>
                                <li><a href="../404.html"><span data-hover="404">404 error</span></a></li>
                                <li><a href="../500.html"><span data-hover="500">500 error</span></a></li>   
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="fe fe-file"></i><span data-hover="Pages">Pages</span></a>
                            <ul>
                                <li><a href="../page-empty.html"><span data-hover="Emptypage">Empty page</span></a></li>
                                <li><a href="../page-profile.html"><span data-hover="Profile">Profile</span></a></li>
                                <li><a href="../page-search.html"><span data-hover="SearchResults">Search Results</span></a></li>
                                <li><a href="../page-timeline.html"><span data-hover="Timeline">Timeline</span></a></li>                                
                                <li><a href="../page-invoices.html"><span data-hover="Invoices">Invoices</span></a></li>
                                <li><a href="../page-pricing.html"><span data-hover="Pricing">Pricing</span></a></li>
                                <li><a href="../page-carousel.html"><span data-hover="Carousel">Carousel</span></a></li>                        
                            </ul>
                        </li>
                        <li><a href="../page-maps.html"><i class="icon-map"></i><span data-hover="Maps">Maps</span></a></li>
                    </ul>
                </nav>
            </div>
            <div class="tab-pane fade active show" id="app-tab">
                <nav class="sidebar-nav">
                    <ul class="metismenu">
                        <li class="g_heading">Components</li>
                        <li><a href="typography.html"><i class="fe fe-type"></i><span>Typography</span></a></li>
                        <li><a href="colors.html"><i class="fe fe-feather"></i><span>Colors</span></a></li>
                        <li><a href="alerts.html"><i class="fe fe-alert-triangle"></i><span>Alerts</span></a></li>
                        <li><a href="avatars.html"><i class="fe fe-user"></i><span>Avatars</span></a></li>
                        <li class="active"><a href="buttons.html"><i class="fe fe-toggle-right"></i><span>Buttons</span></a></li>
                        <li><a href="breadcrumb.html"><i class="fe fe-link-2"></i><span>Breadcrumb</span></a></li>
                        <li><a href="forms.html"><i class="fe fe-layers"></i><span>Input group</span></a></li>
                        <li><a href="list-group.html"><i class="fe fe-list"></i><span>List group</span></a></li>
                        <li><a href="modal.html"><i class="fe fe-square"></i><span>Modal</span></a></li>
                        <li><a href="pagination.html"><i class="fe fe-file-text"></i><span>Pagination</span></a></li>
                        <li><a href="cards.html"><i class="fe fe-image"></i><span>Cards</span></a></li>
                        <li><a href="charts.html"><i class="fe fe-pie-chart"></i><span>Charts</span></a></li>
                        <li><a href="form-components.html"><i class="fe fe-check-square"></i><span>Form</span></a></li>
                        <li><a href="tags.html"><i class="fe fe-tag"></i><span>Tags</span></a></li>                        
                        <li><a href="javascript:void(0)"><i class="fe fe-help-circle"></i><span>Documentation</span></a></li>
                        <li><a href="javascript:void(0)"><i class="fe fe-life-buoy"></i><span>Changelog</span></a></li>
                    </ul>
                </nav>
            </div>
            <div class="tab-pane fade" id="setting-tab">
                <div class="mb-4 mt-3">
                    <h6 class="font-14 font-weight-bold text-muted">Font Style</h6>
                    <div class="custom-controls-stacked font_setting">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="font" value="font-opensans" checked="">
                            <span class="custom-control-label">Open Sans Font</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="font" value="font-montserrat">
                            <span class="custom-control-label">Montserrat Google Font</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="font" value="font-poppins">
                            <span class="custom-control-label">Poppins Google Font</span>
                        </label>
                    </div>
                </div>
                <div class="mb-4">
                    <h6 class="font-14 font-weight-bold text-muted">Dropdown Menu Icon</h6>
                    <div class="custom-controls-stacked arrow_option">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="marrow" value="arrow-a" checked="">
                            <span class="custom-control-label">A</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="marrow" value="arrow-b">
                            <span class="custom-control-label">B</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="marrow" value="arrow-c">
                            <span class="custom-control-label">C</span>
                        </label>
                    </div>
                    <h6 class="font-14 font-weight-bold mt-4 text-muted">SubMenu List Icon</h6>
                    <div class="custom-controls-stacked list_option">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="listicon" value="list-a" checked="">
                            <span class="custom-control-label">A</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="listicon" value="list-b">
                            <span class="custom-control-label">B</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="listicon" value="list-c">
                            <span class="custom-control-label">C</span>
                        </label>
                    </div>
                </div>
                <div>
                    <h6 class="font-14 font-weight-bold mt-4 text-muted">General Settings</h6>
                    <ul class="setting-list list-unstyled mt-1 setting_switch">
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Night Mode</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-darkmode">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Fix Navbar top</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-fixnavbar">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Header Dark</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-pageheader">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Min Sidebar Dark</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-min_sidebar">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Sidebar Dark</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-sidebar">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Icon Color</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-iconcolor">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Gradient Color</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-gradient">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Box Shadow</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-boxshadow">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">RTL Support</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-rtl">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Box Layout</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-boxlayout">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- start main body part-->
    <div class="page">

        <!-- start body header -->
        <div id="page_top" class="section-body">
            <div class="container-fluid">
                <div class="page-header">
                    <div class="left">
                        <h1 class="page-title">Documentation</h1>
                    </div>
                    <div class="right">
                        <div class="notification d-flex">
                            <button type="button" class="btn btn-facebook"><i class="fa fa-info-circle mr-2"></i>Need Help</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-file-text mr-2"></i>Data export</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-power-off mr-2"></i>Sign Out</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Buttons</h3>
                            </div>
                            <div class="card-body">
                                <p>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.</p>
                                <p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used with the <code class="highlighter-rouge">&lt;button&gt;</code> element. However, you can also use these classes on <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;input&gt;</code> elements (though some browsers may apply a slightly different rendering).</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn btn-primary" role="button">Link</a>
                                        <button class="btn btn-primary">Button</button>
                                        <input type="button" class="btn btn-primary" value="Input" />
                                        <input type="submit" class="btn btn-primary" value="Submit" />
                                        <input type="reset" class="btn btn-primary" value="Reset" />
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Reset"</span> <span class="nt">/&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Button variations</h3>
                            </div>
                            <div class="card-body">
                                <p>Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn btn-primary">Primary</a>
                                        <a href="#" class="btn btn-secondary">Secondary</a>
                                        <a href="#" class="btn btn-success">Success</a>
                                        <a href="#" class="btn btn-info">Info</a>
                                        <a href="#" class="btn btn-warning">Warning</a>
                                        <a href="#" class="btn btn-danger">Danger</a>
                                        <a href="#" class="btn btn-link">Link</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Disabled buttons</h3>
                            </div>
                            <div class="card-body">
                                <p>Make buttons look inactive by adding the disabled boolean attribute to any <code class="highlighter-rouge">.btn</code> element. <code class="highlighter-rouge">&lt;a&gt;</code>s don’t support the disabled attribute, so you must add the <code class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn btn-primary disabled">Primary</a>
                                        <a href="#" class="btn btn-secondary disabled">Secondary</a>
                                        <a href="#" class="btn btn-success disabled">Success</a>
                                        <a href="#" class="btn btn-info disabled">Info</a>
                                        <a href="#" class="btn btn-warning disabled">Warning</a>
                                        <a href="#" class="btn btn-danger disabled">Danger</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary disabled"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary disabled"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success disabled"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info disabled"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning disabled"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger disabled"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Color variations</h3>
                            </div>
                            <div class="card-body">
                                <p>The classic button, in different colors.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn text-white bg-blue">Blue</a>
                                        <a href="#" class="btn text-white bg-azure">Azure</a>
                                        <a href="#" class="btn text-white bg-indigo">Indigo</a>
                                        <a href="#" class="btn text-white bg-purple">Purple</a>
                                        <a href="#" class="btn text-white bg-pink">Pink</a>
                                        <a href="#" class="btn text-white bg-red">Red</a>
                                        <a href="#" class="btn text-white bg-orange">Orange</a>
                                        <a href="#" class="btn text-white bg-yellow">Yellow</a>
                                        <a href="#" class="btn text-white bg-lime">Lime</a>
                                        <a href="#" class="btn text-white bg-green">Green</a>
                                        <a href="#" class="btn text-white bg-teal">Teal</a>
                                        <a href="#" class="btn text-white bg-cyan">Cyan</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-blue"</span><span class="nt">&gt;</span>Blue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-azure"</span><span class="nt">&gt;</span>Azure<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-indigo"</span><span class="nt">&gt;</span>Indigo<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-purple"</span><span class="nt">&gt;</span>Purple<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-pink"</span><span class="nt">&gt;</span>Pink<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-red"</span><span class="nt">&gt;</span>Red<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-orange"</span><span class="nt">&gt;</span>Orange<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-yellow"</span><span class="nt">&gt;</span>Yellow<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-lime"</span><span class="nt">&gt;</span>Lime<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-green"</span><span class="nt">&gt;</span>Green<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-teal"</span><span class="nt">&gt;</span>Teal<span class="nt">&lt;/a&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Square buttons</h3>
                            </div>
                            <div class="card-body">
                                <p>Add <code class="highlighter-rouge">.btn-square</code> to button to remove border-radius.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn btn-square btn-primary">Primary</a>
                                        <a href="#" class="btn btn-square btn-secondary">Secondary</a>
                                        <a href="#" class="btn btn-square btn-success">Success</a>
                                        <a href="#" class="btn btn-square btn-info">Info</a>
                                        <a href="#" class="btn btn-square btn-warning">Warning</a>
                                        <a href="#" class="btn btn-square btn-danger">Danger</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Pill buttons</h3>
                            </div>
                            <div class="card-body">
                                <p>Add <code class="highlighter-rouge">.btn-pill</code> class to any button to make them more rounded.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn btn-pill btn-primary">Primary</a>
                                        <a href="#" class="btn btn-pill btn-secondary">Secondary</a>
                                        <a href="#" class="btn btn-pill btn-success">Success</a>
                                        <a href="#" class="btn btn-pill btn-info">Info</a>
                                        <a href="#" class="btn btn-pill btn-warning">Warning</a>
                                        <a href="#" class="btn btn-pill btn-danger">Danger</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Outline buttons</h3>
                            </div>
                            <div class="card-body">
                                <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn btn-outline-primary">Primary</a>
                                        <a href="#" class="btn btn-outline-secondary">Secondary</a>
                                        <a href="#" class="btn btn-outline-success">Success</a>
                                        <a href="#" class="btn btn-outline-info">Info</a>
                                        <a href="#" class="btn btn-outline-warning">Warning</a>
                                        <a href="#" class="btn btn-outline-danger">Danger</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Button size</h3>
                            </div>
                            <div class="card-body">
                                <p>Add <code class="highlighter-rouge">.btn-lg</code> or <code class="highlighter-rouge">.btn-sm</code> for additional sizes.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <button type="button" class="btn btn-primary btn-lg">Large button</button>
                                        <button type="button" class="btn btn-secondary btn-lg">Large button</button>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span></code></pre>
                                </div>
                                <div class="example">
                                    <div class="btn-list">
                                        <button type="button" class="btn btn-primary btn-sm">Small button</button>
                                        <button type="button" class="btn btn-secondary btn-sm">Small button</button>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span></code></pre>
                                </div>
                                <p>Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">.btn-block</code>.</p>
                                <div class="example">
                                    <button type="button" class="btn btn-primary btn-block">Block level button</button>
                                    <button type="button" class="btn btn-secondary btn-block">Block level button</button>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Button with icon</h3>
                            </div>
                            <div class="card-body">
                                <p>Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
                                        <button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button>
                                        <button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button>
                                        <button type="button" class="btn btn-outline-primary"><i class="fe fe-plus mr-2"></i>More</button>
                                        <button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button>
                                        <button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-upload mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Upload<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-heart mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>I like<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-check mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>I agree<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-plus mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>More<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-link mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Link<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-message-circle mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Comment<span class="nt">&lt;/button&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Social buttons</h3>
                            </div>
                            <div class="card-body">
                                <div class="example">
                                    <div class="btn-list">
                                        <button type="button" class="btn mb-1 btn-facebook"><i class="fa fa-facebook mr-2"></i>Facebook</button>
                                        <button type="button" class="btn mb-1 btn-twitter"><i class="fa fa-twitter mr-2"></i>Twitter</button>
                                        <button type="button" class="btn mb-1 btn-google"><i class="fa fa-google mr-2"></i>Google</button>
                                        <button type="button" class="btn mb-1 btn-youtube"><i class="fa fa-youtube mr-2"></i>Youtube</button>
                                        <button type="button" class="btn mb-1 btn-vimeo"><i class="fa fa-vimeo mr-2"></i>Vimeo</button>
                                        <button type="button" class="btn mb-1 btn-dribbble"><i class="fa fa-dribbble mr-2"></i>Dribble</button>
                                        <button type="button" class="btn mb-1 btn-github"><i class="fa fa-github mr-2"></i>Github</button>
                                        <button type="button" class="btn mb-1 btn-instagram"><i class="fa fa-instagram mr-2"></i>Instagram</button>
                                        <button type="button" class="btn mb-1 btn-pinterest"><i class="fa fa-pinterest mr-2"></i>Pinterest</button>
                                        <button type="button" class="btn mb-1 btn-bitbucket"><i class="fa fa-bitbucket mr-2"></i>Bitbucket</button>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-facebook"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-facebook mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Facebook<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-twitter"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Twitter<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-google"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-google mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Google<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-youtube"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-youtube mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Youtube<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-vimeo"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-vimeo mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Vimeo<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dribbble"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-dribbble mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Dribble<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-github"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-github mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Github<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-instagram"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-instagram mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Instagram<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-pinterest"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-pinterest mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Pinterest<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-vk"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-vk mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>VKontakte<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-rss"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-rss mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>RSS<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flickr"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-flickr mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Flickr<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-bitbucket"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bitbucket mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Bitbucket<span class="nt">&lt;/button&gt;</span></code></pre>
                                </div>
                                <p>You can use only icons.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <button type="button" class="btn btn-icon btn-facebook"><i class="fa fa-facebook"></i></button>
                                        <button type="button" class="btn btn-icon btn-twitter"><i class="fa fa-twitter"></i></button>
                                        <button type="button" class="btn btn-icon btn-google"><i class="fa fa-google"></i></button>
                                        <button type="button" class="btn btn-icon btn-youtube"><i class="fa fa-youtube"></i></button>
                                        <button type="button" class="btn btn-icon btn-vimeo"><i class="fa fa-vimeo"></i></button>
                                        <button type="button" class="btn btn-icon btn-dribbble"><i class="fa fa-dribbble"></i></button>
                                        <button type="button" class="btn btn-icon btn-github"><i class="fa fa-github"></i></button>
                                        <button type="button" class="btn btn-icon btn-instagram"><i class="fa fa-instagram"></i></button>
                                        <button type="button" class="btn btn-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>
                                        <button type="button" class="btn btn-icon btn-vk"><i class="fa fa-vk"></i></button>
                                        <button type="button" class="btn btn-icon btn-rss"><i class="fa fa-rss"></i></button>
                                        <button type="button" class="btn btn-icon btn-flickr"><i class="fa fa-flickr"></i></button>
                                        <button type="button" class="btn btn-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-facebook"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-facebook"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-twitter"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-google"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-google"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-youtube"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-youtube"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-vimeo"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-vimeo"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-dribbble"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-dribbble"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-github"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-github"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-instagram"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-instagram"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-pinterest"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-pinterest"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-vk"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-vk"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-rss"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-rss"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-flickr"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-flickr"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-bitbucket"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bitbucket"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Icon buttons</h3>
                            </div>
                            <div class="card-body">
                                <p>Icon only button. Add <code class="highlighter-rouge">.btn-icon</code> class to remove unnecessary padding from button.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary btn-github"><i class="fe fe-github"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary btn-success"><i class="fe fe-bell"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary btn-warning"><i class="fe fe-star"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary btn-danger"><i class="fe fe-trash"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary btn-purple"><i class="fe fe-bar-chart"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="fe fe-git-merge"></i></button>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-activity"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-github"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-github"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-success"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-bell"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-warning"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-star"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-danger"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-trash"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-purple"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-bar-chart"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-git-merge"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Button dropdown</h3>
                            </div>
                            <div class="card-body">
                                <p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code class="highlighter-rouge">.dropdown</code>, or another element that declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;button&gt;</code> elements to better fit your potential needs.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                                                <i class="fe fe-calendar"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                                <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                                                <i class="fe fe-calendar mr-2"></i>Show calendar
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                                <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                                                Show calendar
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                                <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-calendar"</span><span class="nt">&gt;&lt;/i&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-calendar mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Show calendar
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
        Show calendar
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">List of buttons</h3>
                            </div>
                            <div class="card-body">
                                <p>You can now create a list of buttons with the <code class="highlighter-rouge">.btn-list</code> container.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn btn-success">Save changes</a>
                                        <a href="#" class="btn btn-secondary">Save and continue</a>
                                        <a href="#" class="btn btn-danger">Cancel</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                                <p>If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.</p>
                                <div class="example">
                                    <div class="btn-list">
                                        <a href="#" class="btn mb-1 btn-secondary">One</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Two</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Three</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Four</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Five</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Six</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Seven</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Eight</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Nine</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Ten</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Eleven</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Twelve</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Thirteen</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Fourteen</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Fifteen</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Sixteen</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Seventeen</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Eighteen</a>
                                        <a href="#" class="btn mb-1 btn-secondary">Nineteen</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>One<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Four<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Five<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Six<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Seven<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Eight<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Nine<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Ten<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Eleven<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Twelve<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Thirteen<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Fourteen<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Fifteen<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Sixteen<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Seventeen<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Eighteen<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Nineteen<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                                <p>Use the <code class="highlighter-rouge">.text-center</code> or the <code class="highlighter-rouge">.text-right</code> modifiers to alter the alignment.</p>
                                <div class="example">
                                    <div class="btn-list text-center">
                                        <a href="#" class="btn btn-primary">Save changes</a>
                                        <a href="#" class="btn btn-secondary">Save and continue</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list text-center"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                                <div class="example">
                                    <div class="btn-list text-right">
                                        <a href="#" class="btn btn-primary">Save changes</a>
                                        <a href="#" class="btn btn-secondary">Save and continue</a>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list text-right"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Start page footer -->
        <div class="section-body">
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            Copyright © 2019 <a href="https://themeforest.net/user/puffintheme">PuffinTheme</a>.
                        </div>
                        <div class="col-md-6 col-sm-12 text-md-right">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item"><a href="https://themeforest.net/user/puffintheme/portfolio">Portfolio</a></li>
                                <li class="list-inline-item"><a href="javascript:void(0)">FAQ</a></li>
                                <li class="list-inline-item"><a href="javascript:void(0)" class="btn btn-outline-primary btn-sm">Buy Now</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>

<!-- jQuery and bootstrtap js -->
<script src="../../assets/bundles/lib.vendor.bundle.js"></script>

<!-- start plugin js file  -->
<!-- Start core js and page js -->
<script src="../../assets/js/core.js"></script>
</body>
</html>